<template>
  <div class="interview1-wrap">
    <header>
      <div class="header-top">
        <span>AI模拟面试</span>
        <a>更多模拟面试 ></a>
      </div>
      <div class="header-search">
        <!-- 这里是一个多选框和搜索框 -->
        <el-select v-model="value" placeholder="请选择">
          <el-option
            v-for="item in choiceData"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <!-- 这里是一个搜索框 -->
        <el-input placeholder="输入职位、职位搜索" prefix-icon="el-icon-search" clearable>
        </el-input>
      </div>
      <ul class="header-item">
        <li v-for="(questionData, index) in questionsData" :key="index">
          <img :src="questionData.imgUrl" alt="" />
          <div>
            <span>{{ questionData.workName }}</span>
            <span>题目数: {{ questionData.questionCount }}道题</span>
          </div>
        </li>
      </ul>
    </header>
    <main>
      <div class="main-top">面试经验</div>
      <div>
        <el-cascader
          :options="optionsData"
          v-model="selectedOptions"
          @change="handleChange"
          :props="{ expandTrigger: 'hover' }"
          placeholder="请选择"
        >
        </el-cascader>
        <!-- 这是一个可输入的标签选择框 -->

        <!-- 评论 -->
        <div class="comments">
          <comments
            v-for="(comment, index) in 5"
            :key="index"
            :user="{
              avatar:
                'https://tse3-mm.cn.bing.net/th/id/OIP-C.1Et5cvI8Ogv0PbNDyAeM0QAAAA?w=195&h=195&c=7&r=0&o=5&cb=11&pid=1.7',
              name: '不愿吃饼的你'
            }"
            :comment="{ time: '2021-10-10', title: '没必要焦虑，其实吧，最终都能找到工作的！', content: '我是去年通过暑期实习，然后被腾讯音乐留用下来的' }"
          ></comments>
        </div>
      </div>
    </main>
  </div>
</template>

<script setup lang="ts">
import comments from '@/components/comments/comments.vue'
const choiceData = ref([
  {
    value: '1',
    label: '全部岗位'
  },
  {
    value: '2',
    label: '软件开发'
  },
  {
    value: '3',
    label: '通信/硬件'
  },
  {
    value: '4',
    label: '机械/制造'
  },
  {
    value: '5',
    label: '产品/项目/运营'
  },
  {
    value: '6',
    label: '金融'
  },
  {
    value: '7',
    label: '市场营销'
  },
  {
    value: '8',
    label: '咨询/管理'
  },
  {
    value: '9',
    label: '人事/行政/财务'
  },
  {
    value: '10',
    label: '教育/科研'
  },
  {
    value: '11',
    label: '供应链/物流'
  },
  {
    value: '12',
    label: '视觉/交互/设计'
  },
  {
    value: '13',
    label: '房地产/建筑'
  },
  {
    value: '14',
    label: '生物医疗'
  },
  {
    value: '15',
    label: '医护健康'
  },
  {
    value: '16',
    label: '旅游/服务业'
  },
  {
    value: '17',
    label: '其他'
  }
])
const value = ref('1')
const visible = ref(false)
const reference = ref(null)
// 在这里进行axios请求获取questionData数据
const questionsData = ref([
{
    "imgUrl": "https://uploadfiles.nowcoder.com/files/20220707/425742253_1657187366943/logo.png?x-oss-process=image%2Fresize%2Cw_96%2Ch_96%2Cm_mfit",
    "workName": "2023美的AI模拟真题1卷",
    "questionCount": "题目数：8"
  },
  {
    "imgUrl": "https://uploadfiles.nowcoder.com/files/20230315/698145070_1678877900481/%E9%95%BF%E9%91%AB%E5%AD%98%E5%82%A8.jpg?x-oss-process=image%2Fresize%2Cw_96%2Ch_96%2Cm_mfit",
    "workName": "2023长鑫存储AI模拟真题A卷",
    "questionCount": "题目数：5"
  },
  {
    "imgUrl": "https://uploadfiles.nowcoder.com/files/20221117/1030035845_1668668832702/%E9%98%BF%E6%96%AF%E5%88%A9%E5%BA%B7%E5%BD%A9.png?x-oss-process=image%2Fresize%2Cw_96%2Ch_96%2Cm_mfit",
    "workName": "2023阿斯利康AI模拟真题A卷",
    "questionCount": "题目数：6"
  },
  {
    "imgUrl": "https://uploadfiles.nowcoder.com/files/20230302/962361711_1677764132334/igEcAqNwbmcDAQTNAfcFzQH3BtoAI4QBpCEzzzYCqotKWp4sv_0hBJoDzwAAAYPpoyBIBM4AeuKRB86TBhC-CAAKBAvNGA8.png_620x10000g.jpg?x-oss-process=image%2Fresize%2Cw_96%2Ch_96%2Cm_mfit",
    "workName": "阿里巴巴Java工程师AI模拟真题",
    "questionCount": "题目数：36"
  },
  {
    "imgUrl": "https://uploadfiles.nowcoder.com/files/20220104/164872_1641280248741/%E5%AD%97%E8%8A%82%E8%B7%B3%E5%8A%A8.png?x-oss-process=image%2Fresize%2Cw_96%2Ch_96%2Cm_mfit",
    "workName": "字节跳动产品AI模拟真题",
    "questionCount": "题目数：7"
  },
  {
    "imgUrl": "https://uploadfiles.nowcoder.com/files/20220104/164872_1641280248741/%E5%AD%97%E8%8A%82%E8%B7%B3%E5%8A%A8.png?x-oss-process=image%2Fresize%2Cw_96%2Ch_96%2Cm_mfit",
    "workName": "字节跳动运营AI模拟真题",
    "questionCount": "题目数：2"
  },
  {
    "imgUrl": "https://uploadfiles.nowcoder.com/files/20220104/164872_1641280227264/%E8%85%BE%E8%AE%AF.png?x-oss-process=image%2Fresize%2Cw_96%2Ch_96%2Cm_mfit",
    "workName": "腾讯C++工程师AI模拟真题",
    "questionCount": "题目数：55"
  },
  {
    "imgUrl": "https://uploadfiles.nowcoder.com/files/20220104/164872_1641280140480/%E7%99%BE%E5%BA%A6.png?x-oss-process=image%2Fresize%2Cw_96%2Ch_96%2Cm_mfit",
    "workName": "百度前端工程师AI模拟真题",
    "questionCount": "题目数：64"
  }
])
const optionsData = ref([
  // 全部岗位 软件开发 通信/硬件 机械/制造 产品/项目/运营 金融 市场营销 咨询/管理 人事/行政/财务 教育/科研 供应链/物流 视觉/交互/设计 房地产/建筑 生物医疗 医护健康 旅游/服务业 其他
  {
    value: '1',
    label: '全部岗位'
  },
  {
    value: '2',
    label: '软件开发',
    children: [
      {
        value: '2-1',
        label: '后端开发'
      },
      {
        value: '2-2',
        label: '前端开发'
      },
      {
        value: '2-3',
        label: '客户端开发'
      },
      {
        value: '2-4',
        label: '测试'
      },
      {
        value: '2-5',
        label: '数据'
      },
      {
        value: '2-6',
        label: '运维'
      },
      {
        value: '2-7',
        label: '人工智能/算法'
      },
      {
        value: '2-8',
        label: '研发工程师'
      },
      {
        value: '2-9',
        label: '销售技术支持'
      }
    ]
  },
  {
    value: '3',
    label: '通信/硬件',
    children: [
      {
        value: '3-1',
        label: '硬件工程师'
      },
      {
        value: '3-2',
        label: '电子/半导体'
      },
      {
        value: '3-3',
        label: '通信'
      },
      {
        value: '3-4',
        label: '技术支持'
      }
    ]
  },
  {
    value: '4',
    label: '机械/制造',
    children: [
      {
        value: '4-1',
        label: '机械'
      },
      {
        value: '4-2',
        label: '汽车制造'
      },
      {
        value: '4-3',
        label: '化工'
      },
      {
        value: '4-4',
        label: '电气/自动化'
      },
      {
        value: '4-5',
        label: '能源'
      },
      {
        value: '4-6',
        label: '技术支持'
      }
    ]
  },
  {
    value: '5',
    label: '产品/项目/运营',
    children: [
      {
        value: '5-1',
        label: '产品'
      },
      {
        value: '5-2',
        label: '运营'
      },
      {
        value: '5-3',
        label: '游戏策划'
      },
      {
        value: '5-4',
        label: '项目'
      },
      {
        value: '5-5',
        label: '用户研究'
      }
    ]
  },
  {
    value: '6',
    label: '金融',
    children: [
      {
        value: '6-1',
        label: '风控'
      },
      {
        value: '6-2',
        label: '证券类'
      },
      {
        value: '6-3',
        label: '投融资'
      },
      {
        value: '6-4',
        label: '银行'
      },
      {
        value: '6-5',
        label: '保险'
      }
    ]
  },
  {
    value: '7',
    label: '市场营销',
    children: [
      {
        value: '7-1',
        label: '市场/营销'
      },
      {
        value: '7-2',
        label: '销售类'
      },
      {
        value: '7-3',
        label: '公关媒介'
      },
      {
        value: '7-4',
        label: '客服'
      },
      {
        value: '7-5',
        label: '商务'
      },
      {
        value: '7-6',
        label: '采编/写作/出版'
      },
      {
        value: '7-7',
        label: '影视媒体'
      }
    ]
  },
  {
    value: '8',
    label: '咨询/管理',
    children: [
      {
        value: '8-1',
        label: '管理'
      },
      {
        value: '8-2',
        label: '管理培训生'
      },
      {
        value: '8-3',
        label: '咨询/调研'
      }
    ]
  },
  {
    value: '9',
    label: '人事/行政/财务',
    children: [
      {
        value: '9-1',
        label: '财务审计'
      },
      {
        value: '9-2',
        label: '人事'
      },
      {
        value: '9-3',
        label: '行政'
      },
      {
        value: '9-4',
        label: '法务'
      }
    ]
  },
  {
    value: '10',
    label: '教育/科研',
    children: [
      {
        value: '10-1',
        label: '教育产品研发'
      },
      {
        value: '10-2',
        label: '教育'
      },
      {
        value: '10-3',
        label: '翻译相关'
      },
      {
        value: '10-4',
        label: '科研'
      }
    ]
  },
  {
    value: '11',
    label: '供应链/物流',
    children: [
      {
        value: '11-1',
        label: '供应链'
      },
      {
        value: '11-2',
        label: '物流'
      }
    ]
  },
  {
    value: '12',
    label: '视觉/交互/设计',
    children: [
      {
        value: '12-1',
        label: '交互/设计'
      },
      {
        value: '12-2',
        label: '动画/特效'
      },
      {
        value: '12-3',
        label: '工业类设计'
      },
      {
        value: '12-4',
        label: '游戏设计'
      }
    ]
  },
  {
    value: '13',
    label: '房地产/建筑',
    children: [
      {
        value: '13-1',
        label: '房地产'
      },
      {
        value: '13-2',
        label: '设计装修与市政建设'
      }
    ]
  },
  {
    value: '14',
    label: '生物医疗',
    children: [
      {
        value: '14-1',
        label: '生物制药'
      }
    ]
  },
  {
    value: '15',
    label: '医护健康',
    children: [
      {
        value: '15-1',
        label: '护士/护理'
      },
      {
        value: '15-2',
        label: '医生/医技'
      },
      {
        value: '15-3',
        label: '医院/临床医疗/护理'
      }
    ]
  },
  {
    value: '16',
    label: '旅游/服务业',
    children: [
      {
        value: '16-1',
        label: '旅游服务'
      }
    ]
  },
  {
    value: '17',
    label: '其他',
    children: [
      {
        value: '17-1',
        label: '贸易'
      },
      {
        value: '17-2',
        label: '服装/纺织/皮革'
      }
    ]
  }
])
const selectedOptions = ref([])
const handleChange = (value: string[]) => {
  console.log(value, selectedOptions.value)
}


/*阿里巴巴腾讯百度小米集团网易京东美团华为滴滴字节跳动*/
const dropSelectOptions = ref([
  {
    value: '1',
    label: '阿里巴巴'
  },
  {
    value: '2',
    label: '腾讯'
  },
  {
    value: '3',
    label: '百度'
  },
  {
    value: '4',
    label: '小米'
  },
  {
    value: '5',
    label: '集团'
  },
  {
    value: '6',
    label: '网易'
  },
  {
    value: '7',
    label: '京东'
  },
  {
    value: '8',
    label: '美团'
  },
  {
    value: '9',
    label: '华为'
  },
  {
    value: '10',
    label: '滴滴'
  },
  {
    value: '11',
    label: '字节跳动'
  }
])
</script>

<style scoped>

header {
  padding: 20px;
  box-shadow: var(--boxShadow);
  border-radius: 12px;
  margin-bottom: 20px;
}




header .header-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

header .header-top span {
  font-size: 18px;
  font-weight: 500;
}

header .header-top a {
  font-size: 14px;
  cursor: pointer;
}

header .header-search {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

header .header-search .el-select {
  width: 300px;
}

header .header-search .el-input {
  width: 200px;
}

header .header-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.header-item li {
  display: flex;
  align-items: center;
  width: 180px;
  border: 1px solid #e3e1e1;
  border-radius: 6px;
  padding: 10px;
  margin-bottom: 10px;
  cursor: pointer;
}

.header-item li:hover {
  background-color: #f0f7f7;
  border: 1px solid #fff;
  box-shadow: var(--boxShadow);
  transform: translateX(3px);
  transition: all 0.3s;
}

.header-item li img {
  width: 50px;
  height: 50px;
  margin-right: 10px;
}

.header-item li div {
  display: flex;
  flex-direction: column;
}

.header-item li div span:nth-of-type(1) {
  font-size: 14px;
  font-weight: 550;
}

.header-item li div span:nth-of-type(2) {
  font-size: 12px;
  color: #999;
}

main {
  padding: 20px;
  border-radius: 12px;
  margin-bottom: 20px;
  box-shadow: var(--boxShadow);

}

.main-top {
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 20px;
}
</style>
